<template>
  <div class="path-page">
    <!-- :column="3" border -->
    <div class="content">
      <div class="item-msg-title">患者信息</div>
      <el-descriptions border title="">
        <el-descriptions-item label="姓名">{{
          useInfo.病人姓名 || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          useInfo.性别 || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{
          useInfo.年龄 || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="入院时间">
          {{ useInfo.入院日期 || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="住院天数">{{
          useInfo.床日 || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="路径名称">{{
          useInfo.路径名称 || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="进入时间">{{
          useInfo.入径时间 || "-"
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="item-msg-title" style="margin-top: 30px">路径提示：</div>
      <template v-if="variations && variations.length">
        <div class="item-msg">检测到当前路径有变异</div>
        <div class="item-msg" v-for="(item, index) in variations" :key="index">
          {{ index + 1 }}.{{ item || "-" }}
        </div>
      </template>
      <div v-else class="item-msg">未检测到当前病人变异内容</div>
      <div class="slect-item">
        <span class="item-label">状态：</span>
        <el-select
          v-model="formData.status"
          size="small"
          style="min-width: 300px"
          placeholder="请选择状态"
        >
          <el-option label="退出" :value="2"> </el-option>
          <el-option label="完成" :value="4"> </el-option>
        </el-select>
      </div>
      <div class="slect-item">
        <span class="item-label"
          >{{ formData.status == 2 ? "退出" : "完成" }}时间：</span
        >
        <el-date-picker
          style="min-width: 300px"
          v-model="formData.time"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div class="slect-item" v-if="formData.status == 4">
        <span class="item-label">是否变异：</span>
        <el-select
          v-model="formData.isMutation"
          size="small"
          style="min-width: 300px"
          placeholder="请选择"
        >
          <el-option label="是" :value="1"> </el-option>
          <el-option label="否" :value="0"> </el-option>
        </el-select>
      </div>
      <div
        class="slect-item"
        v-if="formData.status == 4 && formData.isMutation == 1"
      >
        <span class="item-label">请选择变异原因：</span>
        <el-select
          v-model="formData.reasons"
          multiple
          size="small"
          style="min-width: 300px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div
        class="slect-item"
        v-if="formData.status == 4 && formData.isMutation == 1"
      >
        <span class="item-label">变异时间：</span>
        <el-date-picker
          style="min-width: 300px"
          v-model="formData.mutationTime"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
          :picker-options="{
            disabledDate(v) {
              return v.getTime() >= new Date(formData.time).getTime();
            },
          }"
        >
        </el-date-picker>
      </div>
      <div class="btns">
        <el-button type="primary" @click="confirmSubmit">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "@/utils/dayjs.min.js";
import { PathForm } from "@/api/commonApi";
export default {
  data() {
    return {
      formData: {
        isMutation: 0,
        mutationTime: "",
        status: 2,
        time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        reasons: [],
      },
      options: [
        {
          label: "病情变化(含并发症)",
          value: 1,
        },
        {
          label: "入院即合并有其它疾病",
          value: 2,
        },
        {
          label: "要求其它治疗(或会诊)",
          value: 3,
        },
        {
          label: "无法配合医护指导",
          value: 4,
        },
        {
          label: "医嘱延迟",
          value: 5,
        },
        {
          label: "执行医嘱延迟",
          value: 6,
        },
        {
          label: "会诊延迟",
          value: 7,
        },
        {
          label: "主治医师决定手术耗材",
          value: 8,
        },
        {
          label: "主治医师决定药物",
          value: 9,
        },
        {
          label: "设备故障",
          value: 10,
        },
        {
          label: "排定之检查(验)延迟",
          value: 11,
        },
        {
          label: "检查(验)报告延迟",
          value: 12,
        },
        {
          label: "手术室排刀问题",
          value: 13,
        },
        {
          label: "没有合适病床供转出使用",
          value: 14,
        },
        {
          label: "部门休假致延迟",
          value: 15,
        },
        {
          label: "病人／家属拒绝出院安排",
          value: 16,
        },
        {
          label: "家属无法依预出时间接病人出院",
          value: 17,
        },
        {
          label: "经济问题不愿接病人出院",
          value: 18,
        },
        {
          label: "其他",
          value: 19,
        },
      ],
      urlQuery: {},
      useInfo: {},
      variations: [],
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUrlParams(url) {
      // 通过 ? 分割获取后面的参数字符串
      let urlStr = url.split("?")[1];
      // 创建空对象存储参数
      let obj = {};
      // 再通过 & 将每一个参数单独分割出来
      let paramsArr = urlStr.split("&");
      for (let i = 0, len = paramsArr.length; i < len; i++) {
        // 再通过 = 将每一个参数分割为 key:value 的形式
        let arr = paramsArr[i].split("=");
        obj[arr[0]] = arr[1];
      }
      return obj;
    },
    async getUserInfo() {
      const query = this.getUrlParams(location.href);
      this.urlQuery = query;
      const res = await PathForm({ tp: 2, param: query.jzh });
      this.useInfo = res.data[0] || {};
      this.variations = [
        this.useInfo.入组错误1,
        this.useInfo.费用2,
        this.useInfo.床日3,
        this.useInfo.是否超范围4,
      ].filter((v) => v);
    },
    closePage() {
      window.open("about:blank", "_self");
      window.close();
    },
    async confirmSubmit() {
      const params = {
        tp: 3,
        uid: this.urlQuery.uid,
        jzh: this.urlQuery.jzh,
        ...this.formData,
      };
      if (!this.formData.time) return this.$message.warning("请选择时间");
      if (!this.formData.reasons.length && this.formData.status == 4)
        return this.$message.warning("请选择变异原因");
      if (this.formData.isMutation && !this.formData.mutationTime) {
        return this.$message.warning("请选择变异时间");
      }
      const res = await PathForm(params);
      this.$message.success("操作成功");
      this.closePage();
    },
  },
};
</script>

<style lang="scss" scoped>
.item-label {
  display: inline-block;
  min-width: 140px;
}
.path-page {
  padding: 50px;
  .content {
    padding: 20px;
    border: 1px solid #dbdbdb;
  }
}
.item-msg {
  margin-bottom: 20px;
  font-size: 14px;
  color: #ff6600;
}
.slect-item {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.btns {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.item-msg-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  padding-left: 10px;
  color: #333;
  border-left: 2px solid #1890ff;
}
</style>
